<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style media="screen">
        #id:hover {
            animation-delay: 100ms;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-iteration-count: 1;
            -webkit-animation-name: 'GrowShrink';
        }

        @keyframes GrowShrink {
            from {
                font-size: xx-small;
                background-color: red;
            }
            to {
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
    </style>
</head>

<body>
    <p>你好，这是我的<span id="id">世界</span>。</p>
</body>

</html>
